<template>
  <div class="searchList statusBar">
    <van-search v-model="value" placeholder="请输入搜索关键词" show-action shape="round" ref="search" @click="returnSearch">
      <template #action>
        <div @click="returnBookcity">取消</div>
      </template>
    </van-search>
    <div class="box">
      <ul class="books">
        <li class="books-item" v-for="(item, index) in searchData" :key="index" @click="goToBookDetails(item._id)">
          <img :src="item.cover" alt="">
          <div>
            <div class="title">{{item.title}}</div>
            <div class="author">{{item.author}}</div>
            <div class="short-intro">{{item.shortIntro}}</div>
            <div>
              <div class="type">{{item.cat}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SearchList',

    data() {
      return {
        // 搜索框
        value: '',
        // 搜索数据
        searchData: [],
      }
    },

    created() {
      this.value = this.searchKey;
      this.getSearchData();
    },

    computed: {
      // 搜索状态
      searchStatus() {
        return this.$store.state.sStatus;
      },

      // 搜索关键字
      searchKey() {
        return this.$store.state.sKey;
      }
    },

    methods: {
      // 修改搜索状态
      changeSearchStatus(status) {
        this.$store.commit('changeSearchStatus', status);
      },

      // 修改搜索值
      changeSearchKey(key) {
        this.$store.commit('changeSearchKey', key);
      },

      // 获取搜索数据
      getSearchData() {
        // 如果输入框为空
        if(!this.value) {
          this.returnSearch();
          return;
        }
        this.axios.get('search', {
          params: {
            keyword: this.value
          }
        }).then(res => {
          // console.log('res', res);
          if(res.data.ok) {
            res.data.books.forEach(v => {
              // 对图片url解码
              v.cover = decodeURIComponent(v.cover.split('/')[2]);
            })
            this.searchData = res.data.books;
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      // 返回搜索页
      returnSearch() {
        this.changeSearchStatus(2);
        this.changeSearchKey(this.value);
        this.$router.replace({name: 'Search'});
      },

      // 返回书城页
      returnBookcity() {
        this.changeSearchStatus(1);
        this.changeSearchKey('');
        this.$router.replace({name: 'BookCity'});
      },
      
      // 转到书籍详情页
      goToBookDetails(bookId) {
        this.$router.push({name: 'BookDetails', query: {bookId, isSearch: true}});
      },
    }
  }
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  top: 54px + 28px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.books {
  overflow-y: auto;
}
.books-item {
  display: flex;
  align-items: center;
  padding: 12px;
}
.books-item>img {
  margin-right: 15px;
  width: 80px;
  border-radius: 2px;
  box-shadow: 2px 2px 4px #aaa;
}
.books-item>div {
  flex: 1;
}
.books-item .title {
  margin: 5px 0;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}
.books-item .author {
  color: #999;
  font-size: 12px;
}
.books-item .short-intro {
  margin: 5px 0;
  max-width: 256px;
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.books-item .type {
  display: inline-block;
  padding: 0 2px;
  color: #999;
  font-size: 10px;
  border: 1px solid #c9c9c9;
}
</style>